<template>
  <div class="login-animation-container">
    <svg class="login-animation" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
      <!-- 云朵装饰 -->
      <g class="clouds">
        <path class="cloud cloud-1" d="M50,115 Q65,105 80,115 Q95,125 110,115 Q125,105 140,115 Q140,140 110,140 Q80,140 80,140 Q50,140 50,115 Z" fill="#fff" opacity="0.9" />
        <path class="cloud cloud-2" d="M220,85 Q235,75 250,85 Q265,95 280,85 Q295,75 310,85 Q310,110 280,110 Q250,110 250,110 Q220,110 220,85 Z" fill="#fff" opacity="0.8" />
      </g>
      
      <!-- 商店图标 -->
      <g class="store">
        <rect x="120" y="140" width="160" height="100" rx="5" fill="#ffaa66" class="store-body" />
        <rect x="110" y="130" width="180" height="20" rx="5" fill="#ff9933" class="store-roof" />
        <rect x="160" y="200" width="80" height="40" rx="5" fill="#fff" class="store-door" />
        <circle cx="230" cy="220" r="5" fill="#ff9933" class="store-handle" />
      </g>
      
      <!-- 购物元素 -->
      <g class="shopping-elements">
        <g class="cart cart-1">
          <circle cx="80" cy="230" r="10" fill="#ffcc99" />
          <circle cx="120" cy="230" r="10" fill="#ffcc99" />
          <path d="M60,200 L130,200 L140,230 L70,230 Z" fill="#ff9933" />
          <path d="M60,190 L70,220" stroke="#ffcc99" stroke-width="3" fill="none" />
        </g>
        
        <g class="product product-1">
          <rect x="270" y="160" width="30" height="30" rx="3" fill="#fff" class="product-box" />
          <path d="M275,165 L295,165 M275,170 L295,170 M275,175 L285,175" stroke="#ff9933" stroke-width="2" />
        </g>
        
        <g class="product product-2">
          <rect x="310" y="180" width="25" height="25" rx="3" fill="#fff" class="product-box" />
          <circle cx="322.5" cy="192.5" r="8" fill="#ffaa66" />
        </g>
      </g>
      
      <!-- 人物 -->
      <g class="person">
        <circle cx="200" cy="80" r="15" fill="#ffcc99" class="person-head" />
        <path d="M200,95 L200,130 M185,110 L215,110 M200,130 L185,160 M200,130 L215,160" stroke="#ffcc99" stroke-width="3" class="person-body" />
      </g>
      
      <!-- 数字化元素 -->
      <g class="digital-elements">
        <path d="M240,60 L260,60 L260,80 L240,80 Z" fill="none" stroke="#ffcc99" stroke-width="2" class="digital-square" />
        <path d="M250,40 L270,40 L270,60 L250,60 Z" fill="none" stroke="#ffcc99" stroke-width="2" class="digital-square" />
        <path d="M230,80 L250,80 L250,100 L230,100 Z" fill="none" stroke="#ffcc99" stroke-width="2" class="digital-square" />
        
        <path d="M140,50 L160,50 M150,40 L150,60" stroke="#ffcc99" stroke-width="2" class="digital-plus" />
        <path d="M120,70 L140,70" stroke="#ffcc99" stroke-width="2" class="digital-minus" />
        
        <circle cx="100" cy="50" r="10" fill="none" stroke="#ffcc99" stroke-width="2" class="digital-circle" />
        <circle cx="130" cy="30" r="8" fill="none" stroke="#ffcc99" stroke-width="2" class="digital-circle" />
      </g>
      
      <!-- 连接线 -->
      <g class="connection-lines">
        <path d="M100,100 C150,80 200,120 250,100" stroke="#ffcc99" stroke-width="1.5" fill="none" stroke-dasharray="5,5" class="connection-line" />
        <path d="M80,150 C120,130 160,170 200,150" stroke="#ffcc99" stroke-width="1.5" fill="none" stroke-dasharray="5,5" class="connection-line" />
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'LoginAnimation'
}
</script>

<style scoped>
.login-animation-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.login-animation {
  width: 100%;
  height: 100%;
  max-width: 450px;
}

/* 云朵动画 */
.cloud {
  animation: float 15s infinite ease-in-out;
}

.cloud-1 {
  animation-delay: 0s;
}

.cloud-2 {
  animation-delay: 7s;
}

@keyframes float {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(10px) translateY(-5px);
  }
  50% {
    transform: translateX(20px) translateY(0);
  }
  75% {
    transform: translateX(10px) translateY(5px);
  }
}

/* 商店动画 */
.store-body {
  animation: pulse 3s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.store-door {
  animation: door 10s infinite ease-in-out;
  transform-origin: 160px 200px;
}

@keyframes door {
  0%, 40%, 60%, 100% {
    transform: rotate(0deg);
  }
  45%, 55% {
    transform: rotate(-20deg);
  }
}

/* 购物车动画 */
.cart {
  animation: move 15s infinite ease-in-out;
}

@keyframes move {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
}

/* 产品动画 */
.product {
  animation: bounce 5s infinite ease-in-out;
}

.product-1 {
  animation-delay: 0s;
}

.product-2 {
  animation-delay: 2.5s;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 人物动画 */
.person {
  animation: wave 7s infinite ease-in-out;
}

@keyframes wave {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(2deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-5px) rotate(-2deg);
  }
}

/* 数字元素动画 */
.digital-square {
  animation: rotate 10s infinite linear;
  transform-origin: center;
}

.digital-plus, .digital-minus {
  animation: blink 7s infinite ease-in-out;
}

.digital-circle {
  animation: scale 8s infinite ease-in-out;
  transform-origin: center;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* 连接线动画 */
.connection-line {
  animation: dash 20s infinite linear;
}

@keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}
</style>

